<template>
  <div class="fbz-form">
    <h1 >LOGIN</h1>
    <Form ref="Form_login" :model="loginInfo" :rules="Rule_login" >
      <FormItem label="username" prop="username">
        <Input type="text" v-model="loginInfo.username" placeholder="username">
<!--          <Icon type="ios-person-outline" slot="prepend"></Icon>-->
        </Input>
      </FormItem>
      <FormItem label="password" prop="password">
        <Input type="password" v-model="loginInfo.password" placeholder="password">
<!--          <Icon type="ios-lock-outline" slot="prepend"></Icon>-->
        </Input>
      </FormItem>
      <FormItem>
        <Button :loading="loading" type="primary" 
          @click="handleSubmit('Form_login')">
          <span v-if="!loading">Submit</span>
          <span v-else>loading...</span>
        </Button>
 
        <Button type="default" @click="handleCancel">Cancel</Button>
<!--        {{loginInfo}}-->
      </FormItem>
    </Form>

  </div>
</template>

<script>
  import axios from 'axios'
  import cookie from 'js-cookie'
export default {
    methods:{
      handleCancel(){
          this.loginInfo={}
      },
        handleSubmit(name){
          this.$refs[name].validate((valid)=>{
              if (valid){
                  this.loading=true
                  // this.$Message.success('success')
                  this.$axios.post('/app/api/user/login',this.loginInfo,{}).then(res=>{
                      console.log(res.data)
                      let result=res.data.result
                      let userInfo=res.data
                      if (result==='LOGIN_SUCCESS'){
                          console.log('LOGIN_SUCCESS')
                          this.$store.commit('loginSuccess',res.data)
                          this.$router.push('/index')
                      }else if (result==='NO_SUCH_USER'){
                          this.$Message.error('NO_SUCH_USER')
                      }
                  }).catch(err=>{
                      console.log(err.response.data)
                  })
              }else {
                  this.$Message.error('loginInfo is wrong')
              }
          })
        }
    },
  data () {
    return {
        loading:false,
        loginInfo: {
            username: 'fbz',
            password: '123456'
        },
        Rule_login:{
            username:[
                {
                    required: true,message:'username is empty', trigger:'blur'
                }
            ],
            password: [
                {
                    required: true,message:'password is empty',trigger: 'blur'
                }
            ]
        }
    }
  }
}
</script>

<style scoped>
  .fbz-form{
    border-top: 1px solid #2c3e50;
    border-left: 1px solid #2c3e50;
    border-radius: 10px;
    padding: 40px 40px 20px 40px;
    width:450px ;
    height: 400px;
    margin: 10% auto;
  }
</style>
